
{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css/font.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/index.css' %}">
  <title>网络科技</title>
</head>

<body>

  <!-- 导航 -->
  <header>
    <div class="logo">网络科技</div>
    <nav>
      <a href="#home">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#showcases">成功案例</a>
      <a href="#service">服务流程</a>
      <a href="#team-intro">团队介绍</a>
      <a href="#company-activities">资讯中心</a>
      <i class="fa fa-search"></i>
    </nav>
    <!-- 小屏幕按钮 -->
    <div class="burger">
      <div class="burger-line1"></div>
      <div class="burger-line2"></div>
      <div class="burger-line3"></div>
    </div>
  </header>

  <!-- 轮播图 -->
  <div id="home" class="glide">
    <div class="glide__track" data-glide-el="track">
      <div class="glide__slides">
        <!-- 第一张轮播图 -->
        {% for slide in slides %}
        <div class="glide__slide">
          <div class="slide-caption">
            <h1>{{ slide.title }}</h1>
            <h3>
              {{ slide.content }}
            </h3>
            <button class="explore-btn">探索更多</button>
          </div>
          <!-- 遮罩层 -->
          <div class="backdrop"></div>
          <img src="media/{{slide.image}}" alt="">
        </div>
        {% endfor %}
      </div>
    </div>
    <!-- 切换按钮 -->
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
        < </button>
          <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
            >
          </button>
    </div>
    <!-- 控制圆点 -->
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>
    </div>
  </div>

  <!-- 关于我们 -->
  <div class="container-wrapper">
    <section id="about-us" class="about-us">
      <h2 class="title1">关于我们</h2>
      <p class="intro">
        公司一直是以技术型开发为主的专业公司，高端的美工设计团队及程序开发团队，网站开发，网站建设与网络营销活动策划相关的企业组织。
      </p>
      <div class="features">
        <div class="feature">
          <i class="fa fa-lightbulb-o"></i>
          <h4 class="feature-title">品牌创意</h4>
          <p class="feature-content">让各知名行业门户脱颖而出,从满足预期到走向卓越。为企业设计独特的并能完美呈现企业价值观的视觉。</p>
        </div>
        <div class="feature">
          <i class="fa fa-line-chart"></i>
          <h4 class="feature-title">整合营销</h4>
          <p class="feature-content">通过市场进入分析，指定网络营销战略，网络营销实施。</p>
        </div>
        <div class="feature">
          <i class="fa fa-shopping-cart"></i>
          <h4 class="feature-title">电子商务</h4>
          <p class="feature-content">根据企业需求，开发不同的销售渠道，通过网上直销</p>
        </div>
        <div class="feature">
          <i class="fa fa-desktop"></i>
          <h4 class="feature-title">网页设计</h4>
          <p class="feature-content">企业官网专属的高端定制化服务
解决方案，全面满足建设核心与运行管理
并提升企业品牌的有效传播。</p>
        </div>
        <div class="feature">
          <i class="fa fa-tachometer"></i>
          <h4 class="feature-title">网站优化</h4>
          <p class="feature-content">先分析后合作，先排名后付费，整站SEO优化让您的网站有更多关键词的自然排名，长期稳定共赢</p>
        </div>
        <div class="feature">
          <i class="fa fa-lightbulb-o"></i>
          <h4 class="feature-title">网站架设</h4>
          <p class="feature-content">从策划到设计制作，每一步都追求做到细腻，结合搜索引擎优化与用户体验优化，制作可持续发展的企业网站</p>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section id="showcases" class="showcases section-bg">
      <h2 class="title1">成功案例</h2>
      <!-- 筛选按钮 -->
      <div class="filter-btns">
        <button class="filter-btn active" data-filter="*">全部</button>
        <button class="filter-btn" data-filter=".category_2">企业集团</button>
        <button class="filter-btn" data-filter=".category_3">移动金融</button>
        <button class="filter-btn" data-filter=".category_4">设计建筑</button>
      </div>
      <!-- 筛选图片 -->
      <div class="cases">
        {% for item in cases %}
        <div class="case-item category_{{item.category.id}}">
          <a href="/news/{{item.id}}">
          <img src="/media/{{item.cover}}" alt="">
          </a>
        </div>
        {% endfor %}

      </div>
    </section>

    <!-- 服务 -->
    <section id="service" class="service">
      <h2 class="title1">服务流程</h2>
      <p class="intro">
        网络综合公司，提供包括网络基础服务（比如域名，主机，邮箱）和网络增值服务（如网站建设和推广，网站优化）等业务
      </p>
      <div class="services">
        <div class="service-item">
          <i class="fa fa-comments"></i>
          <h2 class="service-title">需求沟通</h2>
          <p class="service-content">
            客户提出网站建设基本需求，包括设计要求及功能要求。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-sign-in"></i>
          <h2 class="service-title">项目评估</h2>
          <p class="service-content">
            根据客户提出的需求进行评估，估算出相应的时间与费用。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-signal"></i>
          <h2 class="service-title">签订合同</h2>
          <p class="service-content">
            合作双方确认费用，工期，合作要求的基础上，双方共同签订合同。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-user"></i>
          <h2 class="service-title">提案阶段</h2>
          <p class="service-content">
            完成网站初稿设计，包括首页风格，内页风格页面。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-thumb-tack"></i>
          <h2 class="service-title">制作阶段</h2>
          <p class="service-content">
            完成所有网页的设计，进行程序开发以及前后台的页面整合。
          </p>
        </div>
        <div class="service-item">
          <i class="fa fa-check-circle"></i>
          <h2 class="service-title">网站验收</h2>
          <p class="service-content">
            根据合同条款进行网站验收，并签署网站验收确认单。
          </p>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section id="team-intro" class="team-intro section-bg">
      <h2 class="title1">团队介绍</h2>
      <div class="team-members">
          {% for item in team %}
          <div class="team-member">
              <div class="profile-image">
                  <!-- 显示团队成员头像 -->
                  <img src="media/{{item.avatar}}" alt="">
              </div>
              <!-- 显示团队成员姓名 -->
              <h4 class="name">{{ item.name }}</h4>
              <!-- 显示团队成员职务 -->
              <p class="position">{{ item.title }}</p>
              <ul class="social-links">
                  <li><i class="fa fa-weixin"></i></li>
                  <li><i class="fa fa-weibo"></i></li>
                  <li><i class="fa fa-github"></i></li>
                  <li><i class="fa fa-linkedin-square "></i></li>
              </ul>
          </div>
          {% endfor %}
      </div>
    </section>
    <!-- 数据区域 -->
    <section class="data-section">
      <div class="data-price">
        <i class="fa fa-code"></i>
        <div class="num">280万</div>
        <div class="data-desc">行代码</div>
      </div>
      <div class="data-price">
        <i class="fa fa-trophy"></i>
        <div class="num">168</div>
        <div class="data-desc">个奖项</div>
      </div>
      <div class="data-price">
        <i class="fa fa-male"></i>
        <div class="num">2969</div>
        <div class="data-desc">位客户</div>
      </div>
      <div class="data-price">
        <i class="fa fa-folder"></i>
        <div class="num">684</div>
        <div class="data-desc">个项目</div>
      </div>
    </section>

    <!-- 公司动态 -->
    <section id="company-activities" class="company-activities">
      <h2 class="title1">资讯中心</h2>
      <p class="intro">关注公司动态，获取一手信息</p>
      <div class="activities">
        {% for item in news %}
        <div class="activity">
          <div class="act-image-wrapper">
            <img src="/media/{{item.cover}}" alt="">
          </div>
          <div class="meta">
            <p class="date-published">
              <i class="fa fa-calendar"></i> {{ item.created_at }}
            </p>
          </div>
          <h2 class="act-title">{{ item.title }}</h2>
          <article>{{ item.content|slice:'20'|safe }}...</article>
          <a href="/news/{{item.id}}">
          <button class="readmore-btn">阅读更多</button>
          </a>
        </div>
        {% endfor %}
      </div>
      <div>
        <a href="/news/list">
          <button class="readmore-btn">查看全部新闻</button>
        </a>
      </div>
    </section>
  </div>


  <!-- 尾部 -->
  <footer>
    <div class="footer-menus">
      <div class="contact-us">
        <p class="menu-title">联系我们</p>
        <p>地址:北京市XXXX</p>
        <p>电话:12345678977</p>
        <p>传真:12345678977</p>
        <p>电子邮箱:12345678977@qq.com</p>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">服务概览</p>
        <ul class="menu-items">
          <li><a href="#">网站建设</a></li>
          <li><a href="#">域名购买</a></li>
          <li><a href="#">网页设计</a></li>
          <li><a href="#">移动应用</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">成功案例</p>
        <ul class="menu-items">
          <li><a href="#">桌面网站</a></li>
          <li><a href="#">移动网站</a></li>
          <li><a href="#">科研项目</a></li>
          <li><a href="#">软件应用</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">资讯中心</p>
        <ul class="menu-items">
          <li><a href="#">信息公开</a></li>
          <li><a href="#">最近新闻</a></li>
          <li><a href="#">最新博客</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">帮助与支持</p>
        <ul class="menu-items">
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">文档资源</a></li>
        </ul>
      </div>
      <p class="icp-info">京ICP备案 1234556789 号</p>
      <p class="rights">
        &copy; 2020 XX科技 - 响应式网站 版权所有
      </p>
      <p class="scrollToTop">
        <a href="#home"><i class="fa fa-chevron-up"></i></a>
      </p>
    </div>
  </footer>

  <script src="{% static 'libs/anime/anime.min.js' %}"></script>
  <script src="{% static 'libs/glide/glide.min.js' %}"></script>
  <script src="{% static 'libs/isotope/isotope.pkgd.min.js' %}"></script>
  <script src="{% static 'libs/smooth-scroll/smooth-scroll.polyfills.min.js' %}"></script>
  <script src="{% static 'js/index.js' %}"></script>
</body>

</html>